<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>The Studio</title>
<link href="./css/style.css" rel="stylesheet" type="text/css" />
<link href="./css/blog.css" rel="stylesheet" type="text/css" />
<link href="./css/jquery_dropdown_menu.css" rel="stylesheet" type="text/css" />

<script src="./javascript/jquery.js" type="text/javascript"></script>
<script src="./javascript/custom.js" type="text/javascript"></script>

<!-- Newsletter validation JavaScript Files -->
<script src="./javascript/jquery.formvalidation.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#newsletter").validate();
});
</script>

<!-- Cufon JavaScript Files -->
<script src="./javascript/cufon-yui.js" type="text/javascript"></script>
<script src="./javascript/kabel-font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1, h2, h3, h4, .quote')
</script>
		
<!-- Scroll JavaScript Files -->
<script src="./javascript/scroll.js" type="text/javascript"> </script>
<script type="text/javascript"> 
  $(document).ready(function(){ 
    $.localScroll(); 
  }); 
</script>

<meta charset="UTF-8"></head>

<body> 

<div id="wrapper">

	<div id="header">
	
		<div class="logo"><a href="#"><img src="./images/logo.png" alt="logo" /></a></div>
	
			<div id="myslidemenu" class="jqueryslidemenu">
				<ul>
					<li><a href="./index.html">Home</a>
						<ul>			 
							<li><a href="./index.html">Slideshow</a></li>
							<li><a href="./index2.html">Slideshow - Curtain effect</a></li>
									<li><a href="./index3.html">Anything Slider</a></li>
						</ul><!--END ul home-->
					</li>
					
					<li><a href="./about.html" class="current">About</a></li>
					
					<li><a href="#">Features</a>
						<ul>
							<li><a href="#">Index page &raquo;</a>
								<ul>
									<li><a href="./index.html">Slideshow - Fading</a></li>
									<li><a href="./index2.html">Slideshow - Curtain effect</a></li>
									<li><a href="./index3.html">Anything Slider</a></li>
								</ul><!--END ul index page-->
							</li>
							<li><a href="./about.html">About page</a></li>			
							<li><a href="./services.html">Services page</a></li>
							<li><a href="./portfolio.html">Portfolio - Grid view</a></li>
							<li><a href="./portfolio2.html">Portfolio - List view</a></li>
							<li><a href="./portfolio3.html">Portfolio - Thumb view</a></li>
							<li><a href="./blog.html">Blog page</a></li>
							<li><a href="./blog-single.html">Blog single page</a></li>
							<li><a href="./contact.html">Contact page</a></li>
						</ul><!--END ul features-->
					</li>
						
					<li><a href="./elements.html">Style</a>
						<ul>
							<li><a href="./elements.html">Elements page</a></li>			
							<li><a href="./full-width-page.html">Full width page</a></li>															
							<li><a href="#">Template's colors &raquo;</a>
								<ul>
									<li><a href="http://brankic1979.com/theme/Thestudio/dark/">Dark</a></li>
									<li><a href="./index.html">Grey</a></li>
									<li><a href="http://brankic1979.com/theme/Thestudio/blue/">Blue</a></li>
									<li><a href="http://brankic1979.com/theme/Thestudio/aquamarine/">Deep blue</a></li>
									<li><a href="http://brankic1979.com/theme/Thestudio/red/">Red</a></li>
									<li><a href="http://brankic1979.com/theme/Thestudio/green/">Green</a></li>
									<li><a href="http://brankic1979.com/theme/Thestudio/yellow/">Yellow</a></li>
									<li><a href="http://brankic1979.com/theme/Thestudio/orange/">Orange</a></li>
									<li><a href="http://brankic1979.com/theme/Thestudio/magenta/">Magenta</a></li>
								</ul><!--END ul template's colors-->
							</li>						
							<li><a href="#">Header &raquo;</a>
								<ul>
									<li><a href="./index.html">Twitter update</a></li>
									<li><a href="./blog-single.html">Breadcrumb pagination</a></li>
								</ul><!--END ul header-->
							</li>							
							<li><a href="#">Footer &raquo;</a>
								<ul>
									<li><a href="./about.html#footer">Style 1</a></li>
									<li><a href="./contact.html#footer">Style 2</a></li>
								</ul><!--END ul footer-->
							</li>
						</ul><!--END ul style-->
					</li>	
					
					<li><a href="./services.html">Services</a></li>
					
					<li><a href="./portfolio.html">Portfolio</a>	
						<ul>
							<li><a href="./portfolio.html">Portfolio - Grid view</a></li>
							<li><a href="./portfolio2.html">Portfolio - List view</a></li>
							<li><a href="./portfolio3.html">Portfolio - Thumb view</a></li>
						</ul><!--END ul portfolio-->						
					</li>
					
					<li><a href="./blog.html">Blog</a></li>
					
					<li><a href="./contact.html">Contact</a></li>
				</ul><!--END ul-->
			</div><!--END jqueryslidemenu-->
	
				<span class="quote">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
	
					<form id="search" name="search" method="post" action="#">
						<input name="s" type="text" id="s" value="Search the site" onblur="if (this.value == ''){this.value = 'Search the site'; }" onfocus="if (this.value == 'Search the site') {this.value = ''; }" />
						<input name="" type="image" src="./images/input-search-button.gif" class="search_button" />
					</form><!--END search-->
							
	</div><!--END header-->
	
	<div id="center_holder">
	<div class="twitter">Not sure why I'm still awake at 1AM. Might be due to the fact I'm receiving new emails every 2-5 minutes. <a href="#">about 21 hours ago</a>	
	<a href="#" class="follow-me toolTip"  title="Follow me on Twitter.">follow me</a>
	</div><!--END twitter-->
	</div><!--END twitter holder-->	
	
	<div id="content">
	
    	<div id="inner_content">			
						
			<span id='inner_content_top'></span>
			<span id='inner_content_bottom'></span>			

				<div class="column-holder">
				<h1>Our team, totam rem aperiam</h1>
				<strong>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque</strong>
				<div class="team_avatar">
				<ul>
					<li class="toolTip"  title="John Doe - Developer">
						<img src="./images/avatar.gif" alt="avatar" />
						<p><strong>John Doe </strong>Developer</p>
						<a href="#">email@provider.com</a>
					</li>
					
					<li class="toolTip" title="Jane Doe Junior - Designer">
						<img src="./images/avatar.gif" alt="avatar" />
						<p><strong>Jane Doe Junior </strong>Designer</p>
						<a href="#">email@provider.com</a>		
					</li>
				
					<li class="toolTip" title="Jane Doe - Manager">
						<img src="./images/avatar.gif" alt="avatar" />
						<p><strong>Jane Doe </strong>Manager</p>
						<a href="#">email@provider.com</a>		
					</li>
					
					<li class="last toolTip" title="John Doe Senior - Manager">
						<img src="./images/avatar.gif" alt="avatar" />
						<p><strong>John Doe Senior </strong>Manager</p>
						<a href="#">email@provider.com</a>		
					</li>		
				</ul><!--END ul-->
				</div><!--END team avatar-->


				<h2>Just some of our skills.</h2>
			
						<ul class="indent-ul">
							<li>Basic, Standard and Advanced website creation plan. </li>
							<li>We provide web development services your company can benefit from.</li>
							<li>Great knowledge of developing E-commerce systems. </li>
							<li>Great knowledge of Dreamweaver, Photoshop, Fireworks and Illustrator.</li>
							<li>Great knowledge of XHTML/CSS Skills.</li>
							<li>We can built custom web applications that can meet your business needs.</li>
							<li>Experience in hand coding.</li>
							<li>Competent at creating web sites that validate to W3C Standards.</li>
						</ul>
			
						<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam feugiat nunc ut nibh interdum tempus. Donec at lorem eget sapien iaculis porttitor id quis ligula. </p></blockquote>						

						<p>Lorem Ipsumvero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis top praesentium voluptatum delen atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt culpa tofficia deserunt mollitia animi, id est laborum et are dolorum fuga. Proin neque lorem, egestas quis dictum feugiat, suscipit ut neque. Quisque commodo, urna eget.</p>

						<ol class="indent-ol">
							<li>Class aptent taciti sociosqu ad litora torquent per conubiaa.</li>
							<li>Suspendisse suscipit, dui et mattis fringilla erat dolor.</li>
							<li>In porttitor dignissim nulla non gravida. Etiam id erat ante.</li>
						</ol>
						
				</div><!--END column holder-->
				
				<a href="#header" class="top">top</a>
				
				<div class="block_posts">
				<h2>Recent news</h2>
					<ul>
						<li>
						<img src="./images/blog-thumb1.jpg" alt="" />
						<a href="#">Fusce eu eleifend eros</a> 
						<span>March 24, 2010 at 11:30 pm</span>
						Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam pdf...
						</li>
						
						<li>
						<img src="./images/blog-thumb2.jpg" alt="" />
						<a href="#">Cras in tortor nisi</a> 
						<span>March 24, 2010 at 11:30 pm</span>
						<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam...</p>
						</li>
						
						<li>
						<img src="./images/blog-thumb4.jpg" alt="" />
						<a href="#">Praesent convallis metus imperdiet the dui posuere sollicitudin </a>
						<span>March 24, 2010 at 11:30 pm</span>
						<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam...</p>
						</li>
					</ul>
				</div><!--END block posts-->
		
			</div><!--END inner_content-->

<div id="sidebar">

		<div class="block">
		<h2>Subpage navigation </h2>
			<ul>
				<li><a href="#">Three columns </a></li>
				<li><a href="#">Two columns - odd </a></li>
				<li><a href="#">Two columns - even </a></li>
				<li><a href="#">One column with quotes</a></li>
				<li><a href="#">One column with picture example</a></li>
				<li><a href="#">Pricing table</a></li>
			</ul>
		</div>

		<div id="testimonial-holder">	
				<h2>Testimonials</h2>
					<div class="sliderbutton"><img src="./images/arrow-right.gif" alt="Next" onclick="slideshow.move(1)" /></div>
					<div class="sliderbutton"><img src="./images/arrow-left.gif" alt="Previous" onclick="slideshow.move(-1)" /></div>
					
						<div id="testimonial">
							<ul>
								<li>
									<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam feugiat nunc ut nibh interdum tempus. Donec at lorem eget sapien iaculis porttitor id quis ligula. Duis non ante quis ligula vestibulum scelerisque id quis est. Cras aliquam justo eget elit aliquet quis iaculis felis venenatis.</p>
									<p class="author">John Doe<br/><a href="#">www.johndoewebsite.com</a></p>
								</li>
								<li>
									<p>Donec ut volutpat metus. Aliquam tortor lorem, fringilla tempor dignissim at, pretium et arcu. Etiam eget mi enim, non ultricies nisi.Curabitur pharetra, ante ac suscipit suscipit, erat nisl faucibus justo, sed ornare sem erat interdum turpis.</p>
									<p class="author">Jane Doe Senior<br/><a href="#">www.janedoeseniorwebsite.com</a></p>
								</li>
								<li>
									<p>Etiam eget mi enim, non ultricies nisi. Curabitur pharetra, ante ac suscipit suscipit, erat nisl faucibus justo, sed ornare sem erat interdum turpis. Etiam blandit lacus quis elit convallis commodo sit amet in turpis. Nunc odio tortor, egestas at congue sed, volutpat venenatis erat.</p>
									<p class="author">Jane Doe Junior<br/><a href="#">www.janedoejuniorwebsite.com</a></p>
								</li>
								<li>
									<p>Etiam blandit lacus quis elit convallis commodo sit amet in turpis. Nunc odio tortor, egestas at congue sed, volutpat venenatis erat.</p>
									<p class="author">John Doe Junior<br/><a href="#">www.johndoejuniorwebsite.com</a></p>
								</li>
							</ul><!--END ul-->
						</div><!--END testimonials-->	
			</div><!--END testimonial holder-->	
			<script type="text/javascript" src="./javascript/testimonial.js"></script>
			<script type="text/javascript">
			var slideshow=new TINY.slider.slide('slideshow',{
				id:'testimonial',
				auto:3,
				resume:false,
				vertical:false,
				horizontal:true,
				position:0	
			});
			</script>	
		
		<div class="advertise">
		<ul>
			<li><a href="#"><img src="./images/advert1.gif" alt="1" /></a></li>
			<li><a href="#"><img src="./images/advert4.gif" alt="4" /></a></li>
			<li><a href="#"><img src="./images/advert5.gif" alt="5" /></a></li>
		</ul>
		</div><!--END advertise-->

</div><!--END sidebar-->

</div><!--END content-->

<div id="footer">
	<div class="bottom">
	
		<div>
		<h4>Latest posts</h4>		
			<ul class="posts">
			<li>
			<h1>Jan</h1>
			<div class="listing">
			<p>7, 2010</p>
			<a href="#">Lorem ipsum dolor sit amet</a>
			</div>	
			</li>
				
			<li>
			<h1>Jan</h1>
			<div class="listing">
			<p>29, 2010</p>
			<a href="#">At vero eos et accusamus et iusto</a>
			</div>	
			</li>
				
			<li>
			<h1>Feb</h1>
			<div class="listing">
			<p>25, 2010</p>
			<a href="#">Cras lobortis mauris vel diam</a>
			</div>	
			</li>
				
			<li>
			<h1>Mar</h1>
			<div class="listing">
			<p>17, 2010</p>
			<a href="#">Duis aute irure dolor in reprehenderit</a>
			</div>	
			</li>
			</ul><!--END posts-->
		</div><!--END left-->
		
	
		<div>
		<h4>About us </h4>
			<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab <a href="#">illo inventore veritatis</a> et quasi architecto beatae vitae dicta sunt explicabo, nemo enim ipsam voluptatem quia voluptas sit asperna.</p>
			<br /><br />
			<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
		</div><!--END div-->
	
		
		<div>    	
		<h4>Newsletter</h4>
		<p>Our newsletter is awesome. Subscribe and get the latest updates. Spam free..</p>
		
			<form id="newsletter" name="newsletter" action="#" method="post">
				<input type="text" id="newsletter1" onfocus="if (this.value == 'Enter your name') {this.value = ''; }" onblur="if (this.value == ''){this.value = 'Enter your name'; }" value="Enter your name" />
				<input type="text" id="newsletter2" onfocus="if (this.value == 'Enter your email') {this.value = ''; }" onblur="if (this.value == ''){this.value = 'Enter your email'; }" value="Enter your email" class="required email" />
				<input name="Submit" type="submit" class="submit" value="Submit" />
			</form> 
			<!--END newsletter-->
		
			<ul class="socialize"> 
				<li class="toolTip" title="Flickr"><a href="#"><img src="./images/social-icon1.png" alt="1" /></a></li>
				<li class="toolTip" title="Reddit"><a href="#"><img src="./images/social-icon2.png" alt="2" /></a></li>
				<li class="toolTip" title="Wordpress"><a href="#"><img src="./images/social-icon3.png" alt="3" /></a></li>
				<li class="toolTip" title="Facebook"><a href="#"><img src="./images/social-icon4.png" alt="4" /></a></li>
				<li class="toolTip" title="Stumbleupon"><a href="#"><img src="./images/social-icon5.png" alt="5" /></a></li>
			</ul><!--END socialize ul-->  
				  
		</div><!--END div-->		
	</div><!--END bottom-->
</div><!--END bottom-box-->
  
<div class="footer">
	<div class="copyright">
		<ul>
			<li><a href="./index.html">Home</a></li>
			<li><a href="./about.html">About</a></li>
			<li><a href="./services.html">Services</a></li>
			<li><a href="./elements.html">Features</a></li>
			<li><a href="./portfolio.html">Portfolio</a></li>
			<li><a href="./blog.html">Blog</a></li>
			<li><a href="./contact.html">Contact</a></li>
		</ul>
	<p>© Copyright 2010 Your web site name. All rights reserved.</p>			
	</div><!--END copyright-->
</div><!--END footer-->    

</div><!--END wrapper--> 

<!-- Tooltip JavaScript File -->
<script type="text/javascript" src="./javascript/tooltip.js"></script>

</body>
</html>
